<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加商品信息</title>
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/static/plugins/selectY/selectY.css" />
	<link rel="stylesheet" href="/static/plugins/webuploader/webuploader.css"/>
	<link href="/static/plugins/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />
	<style type="text/css">
		.selectY-box .show{
			width: 762px;	
			color: #1e9fff;
    		font-weight: 600;
		}
		.attribute-title-container{
		    font-size: 18px;
		    border-bottom: 1px solid #ddd;	
		    padding: 4px;
		    width: 190px;
		}
		.size-title-container{
			font-size: 18px;
		    border-bottom: 1px solid #ddd;
		    padding: 4px;
	        width: 190px;
		}
		.layui-elem-field layui-field-title{
			margin-top: 70px;	
		}
		.next-nav-menu{
		    position: fixed;
		    top: 0px;
		    height: 50px;
		    z-index: 9999;		
		    background-color: #fff;
		    width: 100%;
		}
		.edui-container{
			margin-left: 60px;
		}
		.layui-form-label{
			width:90px;
		    font-size: 18px;
		    font-weight: 300;
		}
		.option-wrap{
		    max-width: 280px;		
		    line-height: 24px;
		    height: 24px;
		    display: inline-block;
		    margin-right: 20px;
		}
		.operation-wrap{
		    width: 28px;
    		display: -webkit-inline-box;
   		    margin-right: 24px;
   		    margin-left: -10px
		}
		.attribute-container-wrap{
		    width: 850px!important;
		    height: 70px;	
		    border: 1px solid #ddd;
		    padding: 2px 10px;
		}
		.attribute-container-wrap .layui-btn-xs{
			margin-left: 2px;
			height: 19px;
    		line-height: 19px;
		}
		.size-container-wrap{
			width: 850px!important;
		    height: 70px;
		    border: 1px solid #ddd;
		    padding: 2px 10px;
		}
		.size-container-wrap .layui-btn-xs{
			margin-left: 2px;
			height: 19px;
    		line-height: 19px;
		}
		.delete-defined-attribute-btn{
			margin-top: 8px;
		}
		.delete-defined-size-btn{
			margin-top: 8px;
		}
		.image-list .item .image-card{
			height: 120px;
		}
	</style>
</head>
<body class="body-container">
	<div class="next-nav-menu">
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
		  <ul class="layui-tab-title">
		    <li class="layui-this">商品信息</li>
		    <!-- <li>sku信息</li>
		    <li>商品图片</li>	
		    <li>商品详情</li> -->
		  </ul>
		  <div class="layui-tab-content"></div>
		</div>   
	</div>   
	
	<fieldset class="layui-elem-field layui-field-title">
		<legend>基础信息</legend>
	</fieldset>		
	
	<form class="layui-form" action="">
	
	  <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label zdy-required">品牌</label>
	      <div class="layui-input-inline">
	          <select id="brandIdSelect" name="brandId" lay-verify="required" lay-filter="brandIdSelect" lay-search="">
		      </select>
	      </div>
	    </div>
	    <div class="layui-inline">
	      <label class="layui-form-label zdy-required">车型</label>
	      <div class="layui-input-inline">
	          <select id="categoryIdSelect" name="categoryId" lay-verify="required" lay-filter="categoryIdSelect" lay-search="">
		      </select>
	      </div>
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	  	<div class="layui-inline">
	      <label class="layui-form-label zdy-required">交货方式</label>
	      <div class="layui-input-inline">
	          <select id="deliveryModeIdSelect" name="deliveryModeId" lay-verify="required" lay-filter="deliveryModeIdSelect" lay-search="">
		      </select>
	      </div>
	    </div>
	    <div class="layui-inline">
	      <label class="layui-form-label zdy-required">单位</label>		
	      <div class="layui-input-inline">
	        <input type="tel" name="productUnit" lay-verify="required" autocomplete="off" class="layui-input" maxlength="3" value="件">
	      </div>
	    </div>
	  </div>
			
	  <div class="layui-form-item">	
	    <label class="layui-form-label zdy-required">商品名称</label>
	    <div class="layui-input-inline" style="width: unset;">
	      <input type="text" name="productName" lay-verify="required" autocomplete="off" placeholder="最多允许输入30个汉字（60字符）" class="layui-input zdy-i-w800" maxlength="32" value="噢噢噢噢测试商品名称">
	    </div>
	  	<div class="layui-form-mid layui-word-aux">
	  		<span class="product-name-length">0</span>	
	    	<span>/ 32</span>
	  	</div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label zdy-required">商品标题</label>
	    <div class="layui-input-inline" style="width: unset;">	
	      <input type="text" name="productTitle" lay-verify="required" placeholder="最多允许输入30个汉字（60字符）" autocomplete="off" class="layui-input zdy-i-w800" maxlength="60" value="啦啦啦测试商品标题">
	    </div>		
	    <div class="layui-form-mid layui-word-aux">
	    	<span class="product-title-length">0</span>
	    	<span>/ 60</span>
	    </div>
	  </div>
	  
	  <fieldset class="layui-elem-field layui-field-title">
		<legend>sku信息</legend>
	  </fieldset>			
	  <!-- 属性 -->
	  <!-- <div class="layui-form-item">
	  	<div class="layui-inline">
	    <label class="layui-form-label zdy-required">属性标题</label>
	    <div class="layui-inline attribute-title-container">
    	  <span class="attribute-title">颜色</span>	
	    </div>	
   	  		<button type="button" class="layui-btn layui-btn-xs attribute-title-edit-btn" style="bottom: 5px;position: absolute;">	
   	  		<i class="layui-icon layui-icon-edit">编辑</i>
   	  		</button>
   	  	</div>			
   	  	<div class="layui-inline" style="margin-left: 60px;">
	      	<div class="layui-input-inline" style="width: 270px;">	
	    		<input type="text" name="addAttributeName" placeholder="请输入属性" autocomplete="off" class="layui-input" maxlength="18" style="height: 30px;">	
	    	</div>
	    	<button type="button" class="layui-btn layui-btn-normal layui-btn-xs user-defined-attribute-btn" style="bottom: 0px; position: absolute;">
	    	<i class="layui-icon layui-icon-add-1">添加</i>	
	    	</button>			
	    </div>		
	  </div> -->
	  
	  <div class="layui-form-item">
	  	<div class="layui-inline">
	    <label class="layui-form-label">属性标题</label>
	    <div class="layui-input-inline attribute-title-container">
	      <span class="attribute-title">属性</span>	
	    </div>
   	    	<button type="button" class="layui-btn layui-btn-xs attribute-title-edit-btn" style="bottom: 5px; position: absolute;">
   	    	<i class="layui-icon layui-icon-edit">编辑</i>
   	    	</button>
	    </div>
   	    <div class="layui-inline" style="margin-left: 60px;">	
	      	<div class="layui-input-inline" style="width: 270px;">	
	    		<input type="text" name="addAttributeName" placeholder="请输入属性" autocomplete="off" class="layui-input" maxlength="18" style="height: 30px;">	
	    	</div>
	    	<button type="button" class="layui-btn layui-btn-normal layui-btn-xs user-defined-attribute-btn" style="bottom: 0px; position: absolute;">
	    		<i class="layui-icon layui-icon-add-1">添加</i>
	    	</button>			
	    </div>	
	  </div>
	  	 
	  <div class="layui-form-item">
	    <div class="layui-inline">
	  	  <label class="layui-form-label "></label>		
	      <div class="layui-input-inline attribute-container-wrap">	
	      </div>
	    </div>	
	  </div>
	  
	  <!-- 尺寸 -->
	  <div class="layui-form-item">
	  	<div class="layui-inline">
	    <label class="layui-form-label">尺寸标题</label>
	    <div class="layui-input-inline size-title-container">
	      <span class="size-title">尺寸</span>	
	    </div>
   	    	<button type="button" class="layui-btn layui-btn-xs size-title-edit-btn" style="bottom: 5px; position: absolute;">
   	    	<i class="layui-icon layui-icon-edit">编辑</i>
   	    	</button>
	    </div>
   	    <div class="layui-inline" style="margin-left: 60px;">	
	      	<div class="layui-input-inline" style="width: 270px;">	
	    		<input type="text" name="addSizeName" placeholder="请输入尺寸" autocomplete="off" class="layui-input" maxlength="18" style="height: 30px;">	
	    	</div>
	    	<button type="button" class="layui-btn layui-btn-normal layui-btn-xs user-defined-size-btn" style="bottom: 0px; position: absolute;">
	    		<i class="layui-icon layui-icon-add-1">添加</i>
	    	</button>			
	    </div>	
	  </div>
	  
	  <div class="layui-form-item">
	    <div class="layui-inline">
	  	  <label class="layui-form-label "></label>		
	      <div class="layui-input-inline size-container-wrap">		
	      </div>
	    </div>	
	  </div>
	  
	  <div class="layui-form-item">
		  <div class="layui-inline">
			  <label class="layui-form-label">规格sku</label>
			  <div class="layui-input-inline" style="width: 780px;margin-top: 10px;">			
			  <span style="font-size: 12px;color: #666;margin-right: 10px;">在标题栏中输入可批量填充</span>		
			  <button type="button" class="layui-btn layui-btn-normal layui-btn-xs spec-batch-setting" style="float: right;">批量填充</button>  	
			  </div>
		  </div>
	  </div>
	  
	  <!-- 规格sku -->
	  <div class="layui-form-item product-spec-sku-container">
	  	
	  </div>
	  
	  <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label zdy-required">原价</label>
	      <div class="layui-input-inline">
	        <input type="tel" name="originalPrice" onkeyup="moneyFilter(this)" lay-verify="required" autocomplete="off" class="layui-input" maxlength="10" value="200">
	      </div>
	    </div>
	    <div class="layui-inline">
	      <label class="layui-form-label zdy-required">售价</label>
	      <div class="layui-input-inline">
	        <input type="text" name="sellingPrice" onkeyup="moneyFilter(this)" lay-verify="required" autocomplete="off" class="layui-input" maxlength="10" value="100">
	      </div>	
	    </div>	
	    <div class="layui-inline">
	      <label class="layui-form-label zdy-required">总数量</label>
	      <div class="layui-input-inline">
	        <input type="text" name="productSkuCount" disabled onkeyup="numberFilter(this)" lay-verify="required" autocomplete="off" class="layui-input" maxlength="10" value="100">
	      </div>
	    </div>
	  </div>
	  
	  <fieldset class="layui-elem-field layui-field-title">	
		<legend>商品图片</legend>
	  </fieldset>
	  <div class="layui-form-item">
	  <div class="image-container">
	  	<ul class="image-list">
	  		<li class="item">	
	  			<div class="img-title mian">图-1</div>
	  			<div class="image-card image-sort1">
	  				<div id="fileList" class="uploader-list"></div>	
         			<div class="wb-file-pickers" image-sort="1"></div>	
	  			</div>	
	  			<div class="image-tools image-sort1">		
	  			</div>
	  		</li>
			<li class="item">
				<div class="img-title">图-2</div>
	  			<div class="image-card image-sort2">
	  				<div id="fileList" class="uploader-list"></div>	
         			<div class="wb-file-pickers" image-sort="2"></div>	
	  			</div>
	  			<div class="image-tools image-sort2">
	  			</div>
	  		</li>
	  		<li class="item">
				<div class="img-title">图-3</div>
	  			<div class="image-card image-sort3">
	  				<div id="fileList" class="uploader-list"></div>	
         			<div class="wb-file-pickers" image-sort="3"></div>	
	  			</div>
	  			<div class="image-tools image-sort3">
	  			</div>
	  		</li>	
	  		<li class="item">
				<div class="img-title">图-4</div>
	  			<div class="image-card image-sort4">
	  				<div id="fileList" class="uploader-list"></div>	
         			<div class="wb-file-pickers" image-sort="4"></div>	
	  			</div>
	  			<div class="image-tools image-sort4">
	  			</div>
	  		</li>	
	  		<li class="item">	
				<div class="img-title">图-5</div>
	  			<div class="image-card image-sort5">
	  				<div id="fileList" class="uploader-list"></div>		
         			<div class="wb-file-pickers" image-sort="5"></div>	
	  			</div>	
	  			<div class="image-tools image-sort5">
	  			</div>
	  		</li>		  		
	  	</ul>
	  </div>
	  	
	  <fieldset class="layui-elem-field layui-field-title">	
		<legend>商品详情</legend>
	  </fieldset>
	  <!--style给定宽度可以影响编辑器的最终宽度-->	
	  <script type="text/plain" id="myEditor" style="width:1000px;height:400px;">	
    	
	  </script>	
	  
	  
	  <div class="layui-form-item" style="margin-bottom: 150px;"></div>
	  
	  <div class="fixed-bottom">
	  	 <button type="button" class="layui-btn layui-btn-primary return-to-previous-page">返回上一页</button>
	  	 <!-- <button type="button" class="layui-btn layui-btn-normal">保存草稿</button>	 -->
  		 <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addInfoBtn">提交宝贝</button>	
	  </div>
   </form>	
	<script src="/static/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="/static/layui/layui.all.js" type="text/javascript"></script>	
	<script type="text/javascript" src="/static/plugins/webuploader/webuploader.js"></script>
	<script type="text/javascript" charset="utf-8" src="/static/plugins/ueditor/umeditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="/static/plugins/ueditor/umeditor.min.js"></script>
	<script type="text/javascript" src="/static/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
	<script src="/static/common/common.js" type="text/javascript"></script>
	<script type="text/javascript">		
		// 分类id
		var categoryIdsAry;
		// 分类名称
		var categoryNamesVal;
		// 品牌列表缓存
		var brand_info_list_cache = [];
		// 商品车型列表缓存	
	 	var product_category_list_cache = [];
		
		$(document).ready(function() {
			
			// 商品名称 input长度
			$(".product-name-length").text($("input[name='productName']").val().length);	
			// 商品标题 input长度
			$(".product-title-length").text($("input[name='productTitle']").val().length);	
				
			$('.layui-input-inline input[name="productName"]').bind('input propertychange', function() {
	        	var length = $(this).val().length;	
	        	$(".product-name-length").text(length);
			});
							
			$('.layui-input-inline input[name="productTitle"]').bind('input propertychange', function() {
				var length = $(this).val().length;		
	        	$(".product-title-length").text(length);
	        });
			
			// 获得属性标题	
			var number1 = getCommonMathRand(10);	
			$(".attribute-title-container .attribute-title").attr("title-number",number1);
			$(".attribute-title-edit-btn").attr("title-number",number1);
			
				
			// 获得尺寸标题		
			var number2 = getCommonMathRand(10);	
			$(".size-title-container .size-title").attr("title-number",number2);
			$(".size-title-edit-btn").attr("title-number",number2);
			
			initAddUserDefinedAttribute("黑色");
			initAddUserDefinedAttribute("白色");
			
			initAddUserDefinedSize("至尊版");
			initAddUserDefinedSize("豪华版");
				
			// 初始化 图片文件上传 webUploaderObj
		    initWebUploader();	
				
		    selectBrandInfoNormalList();

		    selectCategoryNormalList();
		    
		    selectDeliveryModeNormalList();
		})
			
		// 实例化编辑器
	    var um = UM.getEditor('myEditor');
	    um.addListener('blur',function(){
	        $('#focush2').html('编辑器失去焦点了')
	    });
	    um.addListener('focus',function(){
	        $('#focush2').html('')
	    });
		
		// 返回上一页  return-to-previous-page
		$(document).on('click', '.return-to-previous-page', function () {
			layer.confirm('确定返回上一级?你所做的修改将不被保存。', {
				btn: ['确定', '取消']		//按钮
			}, function (index) {
				layer.close(index);		
				window.location.href = '/product/showPageInfoList';
			});
		});
	    
		// 一级
		var oneAttributeAry = [];
		// 二级
		var twoAttributeAry = [];
		layui.use('form', function () {
			var form = layui.form;
			// 品牌
			form.on('select(brandIdSelect)', function (data) {
				initCategoryIdSelect(data.value);
		    });
			
			// 属性
			form.on('checkbox(attributeNameCheckbox)', function (data) {
				// data.elem.checked		
				var number = $(this).attr("number");
				var b = data.elem.checked;
				var obj = {
					number:number,
					name:data.elem.title
				}
				if(b==true){
					// 添加
					oneAttributeAry.push(obj);
				}else{
					// 减少
					for (let index = 0; index < oneAttributeAry.length; index++) {
	    	        	const item = oneAttributeAry[index];
	    	        	if(item.number==number){	
	    	        		oneAttributeAry.splice(index,1);
	    	        	}
					}
				}
				initProductSpecSkuContainerHtml();	
		    });		
			// 尺寸		
			form.on('checkbox(sizeNameCheckbox)', function (data) {
				var number = $(this).attr("number");
				var b = data.elem.checked;
				var obj = {
					number:number,
					name:data.elem.title
				}
				if(b==true){
					// 添加
					twoAttributeAry.push(obj);
				}else{
					// 减少
					for (let index = 0; index < twoAttributeAry.length; index++) {
	    	        	const item = twoAttributeAry[index];
						if(item.number==number){
							twoAttributeAry.splice(index,1);
	    	        	}
					}
				}
				initProductSpecSkuContainerHtml();
		    }); 
			//监听提交				
			form.on('submit(addInfoBtn)', function (data) {
				var dataQuery = data.field;	
								
				var attrInfoAry = [];
				// 1级属性
				var titleNumber1 = $(".tr-attribute-title-1").attr("title-number");
				if(titleNumber1){
					var attrObjOne = {};
					var titleName = $(".tr-attribute-title-1").text();
					attrObjOne.attrType = 1;
					attrObjOne.attrLevel = 1,
					attrObjOne.attrTitleCode = titleNumber1;
					attrObjOne.attrName = titleName;
					// 
					attrInfoAry.push(attrObjOne);
				}
				
				// 2级属性
				var attrLevel = 1;
				var titleNumber2 = $(".tr-attribute-title-2").attr("title-number");
				if(titleNumber2){
					if(titleNumber1>0){
						attrLevel = 2;
					}
					var attrObjTwo = {};	
					var titleName = $(".tr-attribute-title-2").text();
					attrObjTwo.attrType = 1;
					attrObjTwo.attrLevel = attrLevel;	
					attrObjTwo.attrTitleCode = titleNumber2;
					attrObjTwo.attrName = titleName;
					//	
					attrInfoAry.push(attrObjTwo);
				}
				
				var attrSkuAry = [];
				$(".product-spec-sku-container .sku-table-row.sku-tbody-row").each(function(i){
											
					// 一级属性
					var attrTitleCodeOne = $(this).children(".sku-cell.sku-cell-text-one").attr("title-number");
					var attrCodeOne_one = $(this).children(".sku-cell.sku-cell-text-one").attr("number-one");
					var attrCodeOne_two = $(this).children(".sku-cell.sku-cell-text-one").attr("number-two");
					var attrNameOne = $(this).children(".sku-cell.sku-cell-text-one").text();
					if(attrCodeOne_one > 0){	
						var attrOne = {};
						attrOne.attrLevel = 1;
						attrOne.attrType = 2;
						attrOne.attrTitleCode = attrTitleCodeOne;
						attrOne.attrCodeOne = attrCodeOne_one;
						attrOne.attrCodeTwo = attrCodeOne_two;
						attrOne.attrName = attrNameOne;
						attrInfoAry.push(attrOne);
					}
					
					// 二级属性
					var attrTitleCodeTwo = $(this).children(".sku-cell.sku-cell-text-two").attr("title-number");
					var attrCodeTwo_one = $(this).children(".sku-cell.sku-cell-text-two").attr("number-one");
					var attrCodeTwo_two = $(this).children(".sku-cell.sku-cell-text-two").attr("number-two");
					var attrNameTwo = $(this).children(".sku-cell.sku-cell-text-two").text();
					if(attrCodeTwo_one > 0){
						var attrTwo = {};
						attrTwo.attrLevel = 1;
						attrTwo.attrType = 2;
						attrTwo.attrTitleCode = attrTitleCodeTwo;
						attrTwo.attrCodeOne = attrCodeTwo_one;
						attrTwo.attrCodeTwo = attrCodeTwo_two;	
						attrTwo.attrName = attrNameTwo;		
						attrInfoAry.push(attrTwo);
					}
											
					// 价格	sku_price		
		    		var skuPrice = $(this).find(".sku-cell-money").val();		
		    		var skuTitleNumber = $(this).find(".sku-cell-money").attr("title-number");
		    		var skuAttrNumberOne = $(this).find(".sku-cell-money").attr("attr-number-one");
		    		var skuAttrNumberTwo = $(this).find(".sku-cell-money").attr("attr-number-two");
		    			
		    		// 数量	sku_count		
		    		var skuCount = $(this).find(".sku-cell-count").val();
		    			
		    		// 编码	sku_code		
		    		var skuCode = $(this).find(".sku-cell-code").val();
					if(!skuCode){
						skuCode = "";
					}
						
					var skuAttrLevel = 1;
					if(attrCodeOne_one > 0&&attrCodeTwo_one > 0){
						skuAttrLevel = 2;
					}	
						
		    		var skuInfo = {
	    				skuPrice:skuPrice,	
	    				skuCount:skuCount,
	    				skuCode:skuCode,
	    				attrTitleCode:skuTitleNumber,
	    				attrCodeOne:skuAttrNumberOne,
	    				attrCodeTwo:skuAttrNumberTwo,
	    				attrLevel:skuAttrLevel
		    		}	
		    		attrSkuAry.push(skuInfo);
		    	})	
		    	
		    	// 获得文件列表	.image-container .image-card
		    	var productFilesAry = [];
		    	$(".image-container .image-card").each(function(i){
					var userfileid = $(this).attr("user-file-id");
		    		if(userfileid>0){
		    			var file = {
		    				userfileid:userfileid,
		    				sort:(i+1)
			    		}
		    			productFilesAry.push(file);
		    		}
		    	})
		    			
				dataQuery.attrInfoListStr = JSON.stringify(attrInfoAry);
				dataQuery.attrSkuListStr = JSON.stringify(attrSkuAry);
				dataQuery.productFilesListStr = JSON.stringify(productFilesAry);
				console.log(dataQuery);			
				$.ajax({
					url: '/productInfo/addInfo',  		// 请求的url地址	
					dataType: 'json', 					// 返回格式为json	
					data: dataQuery,
					type: 'post', 						// 请求方式		
					async: false,	
					success: function (res) {
						if (res.code == 200) {	
							layer.msg("添加成功");	
							//window.location.href = '/productInfo/showPageList';
							window.location.href = '/productInfo/showAddInfo';
						} else {
							layer.msg(res.msg);
						}
					},
					error: function () {

					}
				});
				return false;
			});
		});
	    
	    // 属性标题修改
	    $(document).on('click', '.attribute-title-edit-btn', function () {
	    	var titleNumber = $(this).attr("title-number");
	    	var html = '';	
	    	html += '<form class="layui-form" action="" style="margin-top: 40px;margin-left: 30px;">';
	    	html += '<div class="layui-form-item">';
	    	html += '<div class="layui-inline">';
	    	html += '<div class="layui-input-inline" style="width: 210px;">';	
	    	html += '<input type="text" name="attributeTitleEdit" placeholder="请输入自定义值" autocomplete="off" class="layui-input" maxlength="10" style="height: 30px;">';	
	    	html += '</div>';
	    	html += '</div>';		
	    	html += '</div>';
	    	html += '</form>';

			var index = layer.open({							
				type: 1 ,				 	 //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
				title: '属性标题修改',			 	 //title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
				area: ['340px', '200px'],    // 默认：'auto' 	自适应
				// shade: 1,				     //显示遮罩		
				skin: 'layui-layer-lan',     //layer内置的skin有：layui-layer-lan layui-layer-molv
				// maxmin: true,				
				// shadeClose:true,					
				content:html,				
				btn: ['保存','取消'], 		
				btn1: function(){		
					var editVal = $("input[name='attributeTitleEdit']").val();
					if(!editVal){
						layer.msg("自定义属性不能为空");
						return false;
					}	
					$(".attribute-title").text(editVal);
					$(".tr-title-number-"+titleNumber).html(editVal);
					layer.close(index);	
				},	
				btn2: function(){	
					layer.close(index);		
				},	
				success: function(layers){
					
				}
			});
	    })
	    
	    // 尺寸标题修改
	    $(document).on('click', '.size-title-edit-btn', function () {
	    	var titleNumber = $(this).attr("title-number");
	    	var html = '';	
	    	html += '<form class="layui-form" action="" style="margin-top: 40px;margin-left: 30px;">';
	    	html += '<div class="layui-form-item">';
	    	html += '<div class="layui-inline">';
	    	html += '<div class="layui-input-inline" style="width: 210px;">';	
	    	html += '<input type="text" name="sizeTitleEdit" placeholder="请输入自定义值" autocomplete="off" class="layui-input" maxlength="10" style="height: 30px;">';	
	    	html += '</div>';
	    	html += '</div>';		
	    	html += '</div>';
	    	html += '</form>';
	    	var index = layer.open({							
				type: 1 ,				 	 //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
				title: '尺寸标题修改',			 	 //title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
				area: ['340px', '200px'],    // 默认：'auto' 	自适应
				// shade: 1,				     //显示遮罩		
				skin: 'layui-layer-lan',     //layer内置的skin有：layui-layer-lan layui-layer-molv
				// maxmin: true,				
				// shadeClose:true,					
				content:html,				
				btn: ['保存','取消'], 		
				btn1: function(){		
					var editVal = $("input[name='sizeTitleEdit']").val()
					if(!editVal){
						layer.msg("自定义属性不能为空");
						return false;
					}			
					$(".size-title").text(editVal);
					$(".tr-title-number-"+titleNumber).html(editVal);
					layer.close(index);	

				},	
				btn2: function(){	
					layer.close(index);		
				},	
				success: function(layers){
					
				}
			});	
	    })
	    
	    // 批量填充	 spec-batch-setting
	    $(document).on('click', '.spec-batch-setting', function () {
			console.log("批量填充");		
			
		});
	    
	    // 初始化商品规格  product-spec-sku-container
	    function initProductSpecSkuContainerHtml(){
	    	// 获得属性标题
	    	var attributeTitle =$(".attribute-title-container .attribute-title").text();
	    	var attributeTitleNumber =$(".attribute-title-container .attribute-title").attr("title-number");
	    			
	    	// 获得尺寸标题	
	    	var sizeTitle =$(".size-title-container .size-title").text();	
	    	var sizeTitleNumber =$(".size-title-container .size-title").attr("title-number");
	    		
	    	var html = "";
	    	<!-- 规格信息  -->	
	    	html += '<div class="layui-inline">';
	    	// style="overflow-y: auto;overflow-x: visible;max-height: 400px;"
	    	html += '<div>';
	    	html += '<table class="layui-table" style="width: inherit;margin-left: 105px;">';
	    	html += '<thead>';
	    	html += '<tr class="sku-table-row">';
	    	if(oneAttributeAry.length>0&&twoAttributeAry.length>0){
	    		// 属性和尺寸		
	    		html += '<th style="width: 120px;" class="tr-attribute-title-1 tr-title-number-'+attributeTitleNumber+'" title-number='+attributeTitleNumber+'>'+attributeTitle+'</th>';
	    		html += '<th style="width: 120px;" class="tr-attribute-title-2 tr-title-number-'+sizeTitleNumber+'" title-number='+sizeTitleNumber+'>'+sizeTitle+'</th>';
	    	}else if(oneAttributeAry.length>0){
	    		// 只有属性
	    		html += '<th style="width: 120px;" class="tr-attribute-title-1 tr-title-number-'+attributeTitleNumber+'" title-number='+attributeTitleNumber+'>'+attributeTitle+'</th>';
	    	}else if(twoAttributeAry.length>0){
	    		// 只有尺寸		
	    		html += '<th style="width: 120px;" class="tr-attribute-title-2 tr-title-number-'+sizeTitleNumber+'" title-number='+sizeTitleNumber+'>'+sizeTitle+'</th>';
	    	}
	    	html += '<th style="width: 160px;">';
	    	html += '<span style="float: left;margin-top: 4px;margin-right: 5px;" class="zdy-required">价格(元)</span>';
	    	html += '<input type="text" onkeyup="moneyFilter(this)" name="batchUnitPrice" autocomplete="off" class="layui-input" maxlength="8" style="width: 80px;height: 28px;">';
	    	html += '</th>';			
	    	html += '<th style="width: 160px;">';
	    	html += '<span style="float: left;margin-top: 4px;margin-right: 5px;" class="zdy-required">sku数量(件)</span>';
	    	html += '<input type="text" onkeyup="numberFilter(this)" name="batchQuantity" autocomplete="off" class="layui-input" maxlength="4" style="width: 54px;height: 28px;">';
	    	html += '</th>';		
	    	html += '<th style="width: 210px;">';	
	    	html += '<span style="float: left;margin-top: 4px;margin-right: 5px;">商家编码</span>';
	    	html += '<input type="text" name="attributeTitle" autocomplete="off" class="layui-input" maxlength="18" style="width: 120px;height: 28px;">';
	    	html += '</th>';
	    	html += '</tr>'; 
	    	html += '</thead>';
	    	html += '<tbody>';	
	    	if(oneAttributeAry.length>0&&twoAttributeAry.length>0){
	    		for (let index = 0; index < oneAttributeAry.length; index++) {
	    	        const attribute = oneAttributeAry[index];
			    	for (let index = 0; index < twoAttributeAry.length; index++) {
		    	        const size = twoAttributeAry[index];
		    	        html += '<tr class="sku-table-row sku-tbody-row">';
		    	     	// 属性			
		    	     	if(index==0){
			    			html += '<td class="sku-cell sku-cell-text-one" rowspan="'+(twoAttributeAry.length)+'" title-number='+attributeTitleNumber+' number-one='+attribute.number+' number-two="0">'+attribute.name+'</td>';
		    	     	}else{
		    	     		// display: none;		
		    	     		html += '<td class="sku-cell sku-cell-text" rowspan="1" style="display: none;" title-number='+attributeTitleNumber+' number-one='+attribute.number+' number-two="0">'+attribute.name+'</td>';
		    	     	}
		    	        // 尺寸	
			    		html += '<td class="sku-cell sku-cell-text-two" rowspan="1" title-number='+sizeTitleNumber+' number-one='+attribute.number+' number-two='+size.number+'>'+size.name+'</td>';	
			    				
			    		html += getSkuCellMoneyAndCountAndCodeHtml(sizeTitleNumber,attribute.number,size.number);
									    		
			    		html += '</tr>';
			    	}
	    	    } 
	    	}else if(oneAttributeAry.length>0){
	    		// 只有属性	
	    		for (let index = 0; index < oneAttributeAry.length; index++) {
	    	        const attribute = oneAttributeAry[index];
	    	     	// 属性和尺寸
		    		html += '<tr class="sku-table-row sku-tbody-row">';
			    	// 属性
		    		html += '<td class="sku-cell sku-cell-text-one" title-number='+attributeTitleNumber+' number-one='+attribute.number+' number-two="0">'+attribute.name+'</td>';
			    	
		    		html += getSkuCellMoneyAndCountAndCodeHtml(attributeTitleNumber,attribute.number,0);
		    		
			    	html += '</tr>';
	    	    } 
	    	}else if(twoAttributeAry.length>0){
		    	for (let index = 0; index < twoAttributeAry.length; index++) {
		    		// 只有尺寸		
		    		html += '<tr class="sku-table-row sku-tbody-row">';
	    	        const size = twoAttributeAry[index];	
	    	     	// 尺寸
		    		html += '<td class="sku-cell sku-cell-text-two" title-number='+sizeTitleNumber+' number-one='+size.number+' number-two="0">'+size.name+'</td>';	
		    		
		    		html += getSkuCellMoneyAndCountAndCodeHtml(sizeTitleNumber,size.number,0);
		    		
		    		html += '</tr>';
		    	}	
	    	}
	    	html += '</tbody>';
	    	html += '</table>';
	    	html += '</div>';	
	    	html += '</div>';	
	    	$(".product-spec-sku-container").empty().append(html);
	    }
	    
	    // 获得 价格 数量 编码	
	    function getSkuCellMoneyAndCountAndCodeHtml(titleNumber,numberOne,numberTwo){
	    	var html = "";
	    	// 价格		
	    	html += '<td class="sku-cell">';	
    		html += '<input type="text" onkeyup="moneyFilter(this)" title-number='+titleNumber+' attr-number-one='+numberOne+' attr-number-two='+numberTwo+' lay-verify="required" autocomplete="off" class="layui-input sku-cell-money" maxlength="12" style="height: 28px;" value="10">';
	    	html += '</td>';
	    	// 数量
	    	html += '<td class="sku-cell">';
    		html += '<input type="text" onkeyup="numberFilter(this)" title-number='+titleNumber+' attr-number-one='+numberOne+' attr-number-two='+numberTwo+' lay-verify="required" autocomplete="off" class="layui-input sku-cell-count" maxlength="12" style="height: 28px;" value="10">';
    		html += '</td>';		
    		// 编码
	    	html += '<td class="sku-cell">';
    		html += '<input type="text" onkeyup="numberFilter(this)" title-number='+titleNumber+' attr-number-one='+numberOne+' attr-number-two='+numberTwo+' autocomplete="off" class="layui-input sku-cell-code" maxlength="8" style="height: 28px;">';
    		html += '</td>';
	    	
    		return html;
	    }
	    
	    // wb-file-pickers image-sort
	    var imageSortVal;
	    $(document).on('click', '.wb-file-pickers', function () {
			var imageSort= $(this).attr("image-sort");		
			imageSortVal = imageSort;	
		});
	    	 	
	 	// 查询品牌列表
	 	function selectBrandInfoNormalList(){
	 		$.ajax({
				url: '/brandInfo/selectNormalList',  		// 请求的url地址	
				dataType: 'json', 					// 返回格式为json	
				data: {},
				type: 'post', 						// 请求方式		
				async: false,	
				success: function (res) {
					if (res.code == 200) {	
						brand_info_list_cache = res.dataObject;
						initBrandIdSelect();
					} else {
						layer.msg(res.msg);
					}
				},
				error: function () {

				}
			}); 
	 	}
	 	
	 	// 查询车型列表
	 	function selectCategoryNormalList(){
	 		$.ajax({
				url: '/productCategory/selectNormalList',  		// 请求的url地址	
				dataType: 'json', 					// 返回格式为json	
				data: {},
				type: 'post', 						// 请求方式		
				async: false,	
				success: function (res) {
					if (res.code == 200) {	
						product_category_list_cache = res.dataObject;
					} else {
						layer.msg(res.msg);
					}
				},
				error: function () {

				}
			}); 
	 	}
	 	
	 	// 显示品牌列表
	 	function initBrandIdSelect(){
			var html = '';
			html+='<option value="">选择品牌</option>';
	 		for (let index = 0; index < brand_info_list_cache.length; index++) {
				const element = brand_info_list_cache[index];
				html+='<option value="'+element.id+'">'+element.brandName+'</option>';
			}	
	 		$("#brandIdSelect").empty().append(html);	
	 		layui.form.render(); 	
	 	}
	 	
	 	// 显示车型列表
	 	function initCategoryIdSelect(brandId){
			var html = '';
			if(brandId>0){				
				html+='<option value="">选择车型</option>';
		 		for (let index = 0; index < product_category_list_cache.length; index++) {
					const element = product_category_list_cache[index];
					if(element.brandId==brandId){	
						html+='<option value="'+element.id+'">'+element.categoryName+'</option>';
					}
				}			
			}else{		
				html+='<option value="">请选择品牌</option>';
			}
	 		$("#categoryIdSelect").empty().append(html);	
	 		layui.form.render(); 	
	 	}
	 	
	 	// 查询交货方式
	 	function selectDeliveryModeNormalList(){
	 		$.ajax({
				url: '/productDeliveryMode/selectList',  		// 请求的url地址	
				dataType: 'json', 					// 返回格式为json	
				data: {},
				type: 'post', 						// 请求方式		
				async: false,	
				success: function (res) {
					var html = '';
					if (res.code == 200) {	
				 		for (let index = 0; index < res.dataObject.length; index++) {
							const element = res.dataObject[index];	
							html+='<option value="'+element.id+'">'+element.modeName+" - "+element.description+'</option>';
						}			
					} else {
						layer.msg(res.msg);
					}		
					$("#deliveryModeIdSelect").empty().append(html);	
					layui.form.render(); 	
				},
				error: function () {

				}
			}); 
	 	}
	 	
	 	// 自义定属性 	user-defined-attribute-btn
	    $(document).on('click', '.user-defined-attribute-btn', function () {
	    	initAddUserDefinedAttribute();
	    });
	 	// 添加自定义属性
	    function initAddUserDefinedAttribute(name){
	    	var number = getCommonMathRand(10);
	    	var addAttributeVal = name;
	    	if(!name){	    		
	    		addAttributeVal = $("input[name='addAttributeName']").val()
	    	}
			if(!addAttributeVal){
				layer.msg("自定义属性不能为空");
				return false;
			}
			var html = '';
				html += '<div class="option-wrap attribute-number'+number+'" number='+number+' name='+addAttributeVal+'>';
				//html += '<label>';
				html += '<input type="checkbox" lay-filter="attributeNameCheckbox" lay-skin="primary" number='+number+' title="'+addAttributeVal+'">';
				//html += '</label>';
				html += '<div class="operation-wrap">';
				//html += '<button type="button" class="layui-btn layui-btn-xs"><i class="layui-icon layui-icon-edit" number='+number+'></i></button>';
				html += '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs delete-defined-attribute-btn" number='+number+'><i class="layui-icon layui-icon-delete"></i></button>';
				html += '</div>';
				html += '</div>';		
			$(".attribute-container-wrap").append(html);
			layui.form.render("");
			$("input[name='addAttributeName']").val("")
	    }	
	 	// 删除自定义属性
	 	$(document).on('click', '.delete-defined-attribute-btn', function () {
	 		var number = $(this).attr("number");	
	 		layer.confirm('确定删除尺寸吗？',{title:'提示信息'}, function(index){
	 			$(".attribute-container-wrap .attribute-number"+number).remove();
	 			// 减少
	 			for (let index = 0; index < oneAttributeAry.length; index++) {
	 				const item = oneAttributeAry[index];
	 				if(item.number==number){	
	 				oneAttributeAry.splice(index,1);
	 				}
	 			}
	 			layer.close(index);		
		 		initProductSpecSkuContainerHtml();
			})
	 	})
	    
	 	// 自义定尺寸 	user-defined-size-btn
	    $(document).on('click', '.user-defined-size-btn', function () {
	    	initAddUserDefinedSize();
	    });
	 	// 添加自定义尺寸
	    function initAddUserDefinedSize(name){
	    	var number = getCommonMathRand(10);
	    	var addSizeVal = name;
	    	if(!name){		    		
				addSizeVal = $("input[name='addSizeName']").val()
	    	}
			if(!addSizeVal){	
				layer.msg("自定义尺寸不能为空");
				return false;
			}
			var html = '';	
				html += '<div class="option-wrap size-number'+number+'" number='+number+' name='+addSizeVal+'>';
				//html += '<label>';	
				html += '<input type="checkbox" lay-filter="sizeNameCheckbox" lay-skin="primary" number='+number+' title="'+addSizeVal+'">';
				//html += '</label>';
				html += '<div class="operation-wrap">';
				//html += '<button type="button" class="layui-btn layui-btn-xs"><i class="layui-icon layui-icon-edit"></i></button>';
				html += '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs delete-defined-size-btn" number='+number+'><i class="layui-icon layui-icon-delete"></i></button>';
				html += '</div>';
				html += '</div>';		
			$(".size-container-wrap").append(html);
			layui.form.render();
			$("input[name='addSizeName']").val("")
	    }
	 	// 删除自定义尺寸
	 	$(document).on('click', '.delete-defined-size-btn', function () {
	 		var number = $(this).attr("number");	
	 		layer.confirm('确定删除尺寸吗？',{title:'提示信息'}, function(index){
	 			$(".size-container-wrap .size-number"+number).remove();
	 			// 减少
				for (let index = 0; index < twoAttributeAry.length; index++) {
    	        	const item = twoAttributeAry[index];
					if(item.number==number){
						twoAttributeAry.splice(index,1);
    	        	}
				}
				layer.close(index);		
		 		initProductSpecSkuContainerHtml();
			})
	 	})
	 	
	 		    // 初始化 图片文件上传 webUploaderObj
	    var webUploaderObj = null;
	    function initWebUploader() {	
	    		// 初始化Web Uploader		 	  
		        webUploaderObj = WebUploader.create({
		        auto: true,							// 选完文件后，是否自动上传。
		        // swf文件路径
		        swf: './../static/plugins/webuploader/Uploader.swf',
		        // 文件接收服务端。
		        server: '/upload/productImage',
		        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		        pick: '.wb-file-pickers',    
		        // 只允许选择图片文件。
		        accept: {
		            title: 'Images',
		            extensions: 'gif,jpg,jpeg,bmp,png',
		            mimeTypes: 'image/*'
		        },  			
		        fileVal:"file", 						// [默认值：'file'] 设置文件上传域的name。  
		        fileNumLimit: 1, 						//限制上传个数
		        fileSingleSizeLimit: 2048000, 			//限制单个上传图片的大小
		        compress: false, 						//webuploader默认压缩图片,设置compress:false，可以按照原始比例上传图
				chunked: false, 						//是否要分片处理大文件上传  
				duplicate: false, 						//是否支持重复上传 	 
				fileSizeLimit: 1 * 1024 * 1024 			// 2000 * 1024 * 1024 最大2GB   
				//chunkSize:2*1024*1024, 				//分片上传，每片2M，默认是5M
		    });
		 	// 验证文件格式以及文件大小 
			webUploaderObj.on("error", function (type,file) {
				if (type == "Q_TYPE_DENIED") {
					layer.msg("文件格式不支持");
				} else if (type == "Q_EXCEED_SIZE_LIMIT") {
					layer.msg("文件大小不能超过200M");
				}else if(type == "Q_EXCEED_NUM_LIMIT"){
					layer.msg("超过每次上传数量图片限制");
				}else if(type == "F_DUPLICATE"){
					layer.msg("文件重复");  
				} else {         
					layer.msg("上传出错！错误代码"+type);
				} 
			});     
			// 上传前验证   
			webUploaderObj.on('beforeFileQueued', function (file) {
				
			});
			// 当有文件添加进来的时候
		    webUploaderObj.on( 'fileQueued', function( file , req) {

		    });
			// 文件上传前处理请求参数   
			webUploaderObj.on('uploadBeforeSend', function (obj, data) {
				//传入表单参数 	  	       	
				data.sort = imageSortVal;   
			});     
		    // 文件上传过程中创建进度条实时显示。
		    webUploaderObj.on( 'uploadProgress', function( file, percentage ) {
		
		    });
		    // 文件上传成功
		    webUploaderObj.on( 'uploadSuccess', function( file ,res) {
		    	if(res.code==200){		
					if(res.dataObject){
						var sort =res.dataObject.sort;	
						// 显示上传图片									
						$(".image-container .image-card.image-sort"+sort).empty().append('<img alt="url" src="'+res.dataObject.fileUrl+'">');
						$(".image-container .image-card.image-sort"+sort).attr("user-file-id",res.dataObject.userFileId);	
						// 显示删除			
						var html2 = '<i class="layui-icon layui-icon-delete del-product-image" file-number="'+res.dataObject.number+'" image-sort="'+sort+'"></i>';
						$(".image-container .image-tools.image-sort"+sort).empty().append(html2);	
						layer.msg("上传成功");						
					}else{	
						layer.msg(res.msg);	
					}
				}else{
					layer.msg(res.msg);
				}	
				webUploaderObj.reset();		        
		    }); 
		 	// 上传失败回调
		    webUploaderObj.on( 'uploadError', function( file ) {
					
		    });
		 	// 不管上传成功还是失败都会执行
		    webUploaderObj.on( 'uploadComplete', function( file ) {
		    			
		    });	
	    }
	 	
	 	// 删除商品图片
	 	$(document).on('click', '.del-product-image', function () {	
	 		var fileNumber = $(this).attr("file-number");
	 		var sort = $(this).attr("image-sort");
			layer.confirm('确定删除商品图片吗？', {
				btn: ['确定', '取消']		//按钮
			}, function (index) {
				layer.close(index);			
				console.log("删除商品图片");	
				// 显示上传按钮
				$(".image-container .image-card.image-sort"+sort).empty().append('<div id="fileList" class="uploader-list "></div><div class="wb-file-pickers" image-sort="'+sort+'"></div>');
				// 清空删除					
				$(".image-container .image-tools.image-sort"+sort).empty().append("");	
				initWebUploader();			
				//webUploaderObj.reset();			
				$(".webuploader-pick").css("padding","initial");		
			});
		});

	</script>
</body>
</html>